<html>
    <head>
        <title>运营数据</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" media="all" href="common.css"></link>
        <style type="text/css">
            .cur-login-box{
	            border: 1px solid #DEDEDE;
                border-radius: 3px;
                box-shadow: 2px 2px 2px #DDD;
                background-color: #FFF;
            }
            .fr-rows{
                border: 1px solid #DDD;
                background-color: #FFF;
            }
            #wifi_list{overflow:auto; height: 300px;}
            .fr-rows>div{border-top: 1px dotted #DDD; cursor: pointer;}
            .fr-rows>div:first-child{border-top:0;}
            .fr-rows>div.active{background-color: #EFEFEF; color: #369;}
            .fr-rows>div:hover{background-color: #EFEFEF;}
        </style>
    </head>
    <body>
        <div class="fr-container fr-align-center fr-fullscreen">
            <div class="fr-table fr-fullscreen">
                <div class="fr-table-cell fr-vlign-middle">
                    <ul class="fr-col-10">
                        <li class="fr-row wifi-title">TableFree  TF-01 管理系统</li>
                        <li class="fr-row-40 fr-row-margin10 wifi-instruction">请选择TableFree要连接的WI-FI  SSID,最终确保您的移动设置终端和TableFree连接到同一个SSID：</li>
                        <li class="fr-row fr-row-margin10 fr-align-center">
                            <div class="fr-rows fr-col-6" id="wifi_list">
                                
                            </div>
                        </li>
                        <li class="fr-row-margin10">
                            <span class="fr-btn fr-btn-blue" id="loginbtn">登录</span> &nbsp; <span class="fr-btn fr-btn-gray">取消</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fr-container fr-align-center fr-fullscreen fr-mask" id="mask">
            <div class="fr-table fr-fullscreen">
                <div class="fr-table-cell fr-vlign-middle">
                    <ul class="cur-login-box fr-col-4">
                        <li class="fr-row-40 fr-row-title fr-align-left">管理登录</li>
                        <li class="fr-popup-content">
                            
                        </li>
                        <li class="fr-row fr-row-40 fr-align-center">
                            <span class="fr-btn fr-btn-orange">确定</span>
                            <span class="fr-btn fr-btn-red">取消</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fr-hide" id="wifi-passwd-html">
            <div class="wifi-login-box fr-align-left">
                <div class="fr-col-10 fr-row fr-row-40">
                    <span class="fr-col-3 fr-align-right wifi-login-label">热点名称:</span>
                    <span class="fr-col-8 fr-align-left" id="ap_name"></span>
                </div>
                <div class="fr-col-10 fr-row fr-row-40">
                    <span class="fr-col-3 fr-align-right wifi-login-label">登录密码:</span>
                    <span class="fr-col-8 fr-align-left"><input type="password" name="ap_passwd" id="ap_passwd" value="" placeholder="请输入登录密码"></span>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="jquery.1.11.3.mini.js"></script>
    <script type="text/javascript" src="common.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#loginbtn').on('click', function(){
                init.wifiLogin();
            })
            $('#wifi_list').on('click', 'div', function(){
                $('#wifi_list>div').removeClass('active');
                $(this).addClass('active');
                if($(this).data('encrypt') == 1){
                    var apName = $(this).data('wifi');
                    var wifi = this;
                    $(this).data('password', '');
                    return popup.showContent("登录密码", $('#wifi-passwd-html').html(), function(){
                        var passwd = $('input[name=ap_passwd]').val();
                        if(passwd.length == 0){
                            return popup.toast('请输入wifi登录密码');
                        }
                        $(wifi).data('password', passwd);
                        init.wifiLogin();
                    }, {afterShow: function(){
                        $('#ap_name',this).text(apName);
                    }});
                    return;
                }
            })
            var init = {
                wifi: function(){
                    request('/apList.cgi', null, 'get', function(data){
                        var html = '';
                        for(var i in data.apList){
                            html += '<div class="fr-row-30" data-wifi="' + data.apList[i].name + '" data-encrypt="' + data.apList[i].encrypt + '">' + data.apList[i].name + '</div>';
                        }
                        $('#wifi_list').html(html);
                    })
                },
                wifiLogin: function(){
                    var wifi = $('#wifi_list>div.active');
                    if(wifi.size() == 0){
                        return popup.toast('请选择要使用的热点');
                    }
                    var params = {SSID: $(wifi).data('wifi'), Password: $(wifi).data('password')};
                    request('/apClientModeLogin.cgi', params, 'post', function(data){
                        sessionStorage.setItem('ip', data.ipAddress);
                        top.location.href = '/login.html';
                    })
                }
            };
            init.wifi();
        })
    </script>
</html>